<template>
  <div style="margin-bottom: 20px">
    <span style="font-size: 18px;font-weight: bold">
      输入提示文本，点击生成按钮生成文本
    </span>
  </div>
  <el-divider/>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <h3 style="display: inline">请输入提示文本：</h3>
      </div>
    </template>
    <el-input
        type="textarea"
        placeholder="请输入提示文本"
        v-model="prompt"
        :autosize="{ minRows: 4, maxRows: 8}"
        maxlength="1000"
        show-word-limit
    >
    </el-input>
    <el-divider/>
    <div style="text-align: right">
      <el-button type="primary" round @click="onGenerateClick">生成</el-button>
    </div>
    <el-divider/>
    <generate-parameter-setter ref="generateParameterSetter" editable/>
  </el-card>
  <div v-for="each in resultCardList" :key="'raw-text-generate-card-' + each.cardIndex">
    <el-divider/>
    <raw-text-generate-task-card
        :prompt="each.prompt"
        :card-index="each.cardIndex"
        :max-length="each.maxLength"
        :temperature="each.temperature"
        :top-k="each.topK"
        :top-p="each.topP"
        @close="onCardClose(each.cardIndex)"/>
  </div>
</template>

<script>
import RawTextGenerateTaskCard from "./RawTextGenerateTaskCard.vue";
import GenerateParameterSetter from "./GenerateParameterSetter.vue";
import {ElMessage} from "element-plus";

export default {
  name: "RawTextGenerateTask",
  components: {
    RawTextGenerateTaskCard,
    GenerateParameterSetter
  },
  data() {
    return {
      resultCardList: [],
      resultCardIndex: 0,
      loading: true,
      prompt: '',
    }
  },
  mounted() {
    this.axios.get('/generate/config').then(response => {
      this.$refs.generateParameterSetter.table.maxLength = response.data['max_length']
      this.$refs.generateParameterSetter.table.temperature = response.data['temperature']
      this.$refs.generateParameterSetter.table.topK = response.data['top_k']
      this.$refs.generateParameterSetter.table.topP = response.data['top_p']
      this.loading = false
    }).catch(err => {
      ElMessage('获取文本生成参数失败, 详情见控制台')
      console.log(err)
    })
  },
  methods: {
    onCardClose(cardIndex) {
      for (let i = 0; i < this.resultCardList.length; ++i) {
        if (this.resultCardList[i].cardIndex === cardIndex) {
          this.resultCardList.splice(i, 1);
          break;
        }
      }
    },
    onGenerateClick() {
      let paramSetter = this.$refs.generateParameterSetter
      this.resultCardList.unshift({
        prompt: this.prompt,
        cardIndex: this.resultCardIndex,
        maxLength: Number(paramSetter.table.maxLength),
        temperature: Number(paramSetter.table.temperature),
        topK: Number(paramSetter.table.topK),
        topP: Number(paramSetter.table.topP),
      })
      this.resultCardIndex += 1
    },
    // todo: 转换为工具函数
    isInteger(obj) {
      return typeof obj === 'number' && obj % 1 === 0
    },
    // todo: 转换为工具函数
    formatHTMLString(string) {
      // 回车
      string = string.replace(/\r\n/g, "<br>").replace(/\n/g, "<br>").replace(/\r/g, "<br>");
      return string
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  text-align: left;
  margin-top: 10px;
}
</style>